<template>
  <div>
    <el-select
        @change="getScoreInformation"
        v-model="courseId"
        clearable placeholder="选择课程">
      <el-option
          v-for="item in allCourses"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
    </el-select>
    <el-select
        @change="getScoreInformation"
        v-model="planId"
        clearable placeholder="选择评价计划">
      <el-option
          v-for="item in allPlans"
          :key="item.value"
          :label="item.label"
          :value="item.value"
      />
    </el-select>
    <el-button style="margin: 20px" type="success" @click="handleDownLoad">导出</el-button>
  </div>
  <el-divider/>
  <div class="map">
    <div>
      <Secateurs class="echarts" :options="option"></Secateurs>
    </div>
    <div>
      <Secateurs class="echarts" :options="option2"></Secateurs>
    </div>
  </div>

</template>

<script setup>
import Secateurs from "@/components/Ecahtrs.vue";
import {onMounted, ref} from "vue";
import axios from "@/utils/axios";
import {localGet} from "@/utils";

const option = ref({})

const planId = ref("")

const courseId = ref("")

const option2 = ref({})

const allCourses = ref([])

const allPlans = ref([])

const selectOptions = "all";

const loadTeacherCourseList = () => {
  axios.get("/evaluate/course/teacher/list").then(response => {
    allCourses.value = []
    allCourses.value.push({
      label: "所有的课程"
    })
    response.map(course => {
      allCourses.value.push({
        label: course.name,
        value: course.id
      })
    })
  })
}

function handleDownLoad() {
  fetch(`/api/evaluate/evaluate/excel?planId=${planId.value?planId.value:""}&courseId=${courseId.value?courseId.value:""}`, {
    method: 'GET',
    headers: new Headers({
      'Authorization': localGet('token') !== null ? "Bearer " + localGet('token') : ""
    }),
  })
      .then(res => res.blob())
      .then(data => {
        const blobUrl = window.URL.createObjectURL(data);
        download(blobUrl);
      });
}

//模拟a标签实现下载excel文件
function download(blobUrl) {
  const a = document.createElement('a');
  a.download = new Date().getTime().toString() + '.xlsx';
  a.href = blobUrl;
  a.click();
}

const loadPlanList = () => {
  allPlans.value = []
  allPlans.value.push({
    label: "所有的评价计划"
  })
  axios.get("/evaluate/evaluationPlan").then((response) => {
    response.map(plan => {
      allPlans.value.push({
        label: plan.title,
        value: plan.id
      })
    })
  })
}
const getScoreInformation = () => {
  axios.get("/evaluate/evaluate/result", {
    params: {
      planId: planId.value,
      courseId: courseId.value,
      isTeacher: false
    }
  }).then((res) => {
    let typeList = []
    let scoreList = []
    res.map(score => {
      typeList.push(score.type)
      scoreList.push(score.fraction)
    })
    option.value = {
      title: {
        text: '老师评分-（学生评分统计）'
      },
      tooltip: {},
      legend: {
        data: ['分类']
      },
      xAxis: {
        data: typeList
      },
      yAxis: {},
      series: [
        {
          name: '分数',
          type: 'bar',
          data: scoreList
        }
      ]
    };
  })

  axios.get("/evaluate/evaluate/result", {
    params: {
      planId: planId.value,
      courseId: courseId.value,
      isTeacher: true
    }
  }).then((res) => {
    let typeList = []
    let scoreList = []
    res.map(score => {
      typeList.push(score.type)
      scoreList.push(score.fraction)
    })
    option2.value = {
      title: {
        text: '老师评分-（老师评分统计）'
      },
      tooltip: {},
      legend: {
        data: ['分类']
      },
      xAxis: {
        data: typeList
      },
      yAxis: {},
      series: [
        {
          name: '分数',
          type: 'bar',
          data: scoreList
        }
      ]
    };
  })
}
onMounted(() => {
  loadTeacherCourseList()
  loadPlanList()
  getScoreInformation()
})
</script>

<style scoped>
.map {
  display: flex;
}

.map div {
  flex: 1;
  margin: 30px;
}

.echarts {
  width: 500px;
  height: 500px;
}

.el-select {
  margin: 30px;
}
</style>